<template>
<view>
<!--index.wxml-->
<!-- 账户信息开始 -->
<view class="account_info">
  <view class="header_image">
    <image :src="userInfo.head_pic"></image>
  </view>
  <view class="shop_title">{{store.store_name||'我的店铺'}}</view>
  <navigator class="add" url="/pages/distribut/good_list/good_list">
        <view>添加商品</view>
  </navigator>
    <view class="info_data">
        <view class="products">
        <navigator url="/pages/distribut/distribut_list/distribut_list" class="sum">{{list.length}}</navigator>
        <navigator url="/pages/distribut/distribut_list/distribut_list" class="writing">我的商品</navigator>
        </view>
        <view class="line"></view>
        <view class="products">
        <navigator url="/pages/distribut/good_list/good_list" class="sum" style="font-size:34rpx;">{{goods.length}}</navigator>
        <navigator url="/pages/distribut/good_list/good_list" class="writing">待上架商品</navigator>
        </view>
    </view>
</view>
<!-- 账户信息结束 -->
<!-- 商品信息开始 -->
<view class="product_info clearfix">

<block v-for="(item, index) in list" :key="index">
  <navigator class="product_list" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
    <view class="product_image">
      <view class="product_image_title">TPshop</view>
      <view class="product_image_content">开源商城</view>
      <image :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=400&height=400'"></image>
    </view>
    <view class="product_list_title">{{item.goods_name}}</view>
    <view class="activities clearfix">
      <view class="activity" v-if="item.label_id != ''">{{item.label_id}}</view>
      <view class="activity" v-if="item.is_free_shipping == 1">包邮</view>
    </view>
   <view class="product_data clearfix">
      <view class="price">￥<view>{{item.shop_price}}</view></view>
      <view class="amount">已售{{item.sales_sum}}件</view>
    </view>
  </navigator>
 </block>
</view>
<!-- 商品信息结束 -->


<!-- 底部菜单 -->
<!--<import src="../../index/publics/publics.wxml"></import>-->
<block data-type="template" data-is="distributMenu" data-attr="page:page">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <!-- 我的分销底部导航 -->
    <view class="tpd-footer tpd-footer1">
        <view hover-class="none" @tap.stop="distributTopages" data-idx="0" :class="page == 0?'tpd-footer-select':''"><image :src="page == 0?'/images/distribut/seller_red@2x.png':'/images/distribut/seller_black@2x.png'"></image><text>分销中心</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="1" :class="page == 1?'tpd-footer-select':''"><image style="width:59rpx;" :src="page == 1?'/images/distribut/team_red@2x.png':'/images/distribut/team_black@2x.png'"></image><text>我的团队</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="2" :class="page == 2?'tpd-footer-select':''"><image :src="page == 2?'/images/distribut/money_red@2x.png':'/images/distribut/money_black@2x.png'"></image><text>我的账户</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="3" :class="page == 3?'tpd-footer-select':''"><image :src="page == 3?'/images/distribut/order_red@2x.png':'/images/distribut/order_black@2x.png'"></image><text>分销订单</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="4" :class="page == 4?'tpd-footer-select':''"><image :src="page == 4?'/images/distribut/shop_red@2x.png':'/images/distribut/shop_black@2x.png'"></image><text>我的网店</text></view>
    </view>
  </view>
</block>
</view>
</template>

<script>
//index.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
var common = require("../../../utils/common.js");
var util = require("../../../utils/util.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      page: 4,
      currentPage: 1,
      list: null,
      url: setting.url,
      userInfo: null,
      store: null,
      goods: null //待上架商品

    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.requestGoodsList();
  },
  onShow: function () {
    var that = this;
    var userInfo = uni.getStorageSync('app:userInfo');

    if (userInfo) {
      userInfo.head_pic = common.getFullUrl(userInfo.head_pic);
    }

    that.setData({
      userInfo: userInfo
    });
    load.init(this, '', 'list');
    that.getGoodsList();
    that.getStore();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.getGoodsList();
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.getGoodsList();
  },
  methods: {
    // 请求待上架商品
    requestGoodsList: function (e) {
      var that = this;
      request.get('/api/Distribut/goods_list', {
        success: function (res) {
          var res = res.data.result;
          that.setData({
            goods: res
          });
        }
      });
    },
    getStore: function () {
      var that = this;
      request.post('/api/Distribut/get_store', {
        successReload: true,
        success: function (res) {
          if (res.data.result) {
            that.setData({
              store: res.data.result
            });
          }
        }
      });
    },
    getGoodsList: function () {
      var that = this;
      load.request('/api/Distribut/my_store?p=' + that.currentPage, function (res) {
        that.currentPage++;
      });
    },
    distributTopages: function (e) {
      common.todistribut(e.currentTarget.dataset.idx, this.page);
    },
    //重置数据
    resetData: function () {
      load.resetConfig();
      this.list = null;
      this.currentPage = 1;
    }
  }
};
</script>
<style>
/**index.wxss**/
page {
    background-color: #f5f5f5;
}
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.account_info {
  height: 300rpx;
  overflow: hidden;
  color: #fff;
  position: relative;
  	background-image: linear-gradient(0deg, 
		#f62f2f 0%, 
		#f7542e 100%), 
	linear-gradient(
		#ff6a00, 
		#ff6a00);
	background-blend-mode: normal, 
		normal;
}
.account_info .header_image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin:34rpx 0 0 34rpx;
  overflow: hidden;
}
.add{
    position:absolute;
    font-size:22rpx;
    width:125rpx;
    height:46rpx;
    border-radius:23rpx;
    border:solid 2rpx #ffffff;
    top:39rpx;
    right:31rpx;
    line-height:46rpx;
    text-align:center;
}
.account_info .header_image image {
  width: 100rpx;
  height: 100rpx;
  border-radius:50%;
}
.account_info .shop_title {
    font-size: 30rpx;
    position:absolute;
    top:78rpx;
    left:169rpx;
}
.info_data{
    display:flex;
    justify-content:space-around;
}
.account_info .info_data .products,.account_info .info_data .new,.account_info .info_data .sales {
  text-align: center;
  margin-top: 75rpx;
  box-sizing: border-box;
  height: 30rpx;
}
.account_info .info_data .sales {
  border-right: 0;
}
.account_info .info_data > view > .sum {
  margin-top: -17rpx;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 42rpx;
  margin-bottom: 12rpx;
}
.account_info .info_data > view > .writing {
  font-size: 22rpx;
}
.line{
    width: 2rpx;
	height: 30rpx;
	background-color: #ffd2d2;
	opacity: 0.8;
    margin-top:75rpx;
}
.product_info {
  margin-top: 20rpx;
  margin-bottom: 100rpx;
}
.product_info .product_list {
  float: left;
  width: 345rpx;
  height: 494rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10rpx;
  margin-left: 20rpx;
  overflow: hidden;
}
.product_info .product_list:nth-child(2n) {
  padding-left: 5rpx;
}
.product_info .product_list .product_image {
  width: 345rpx;
  height: 345rpx;
  background-color: #eaeaea;
  position: relative;
  overflow: hidden;
}
.product_info .product_list .product_image .product_image_title {
  color: #fff;
  font-size: 60rpx;
  margin-top: 116rpx;
  text-align: center;
}
.product_info .product_list .product_image .product_image_content {
  text-align: center;
  margin-top: 5rpx;
  font-size: 36rpx;
  color: #fff;
  letter-spacing: 5rpx;
}
.product_info .product_list .product_image image {
  position: absolute;
  top: 0;
  left: 0;
  width: 345rpx;
  height: 345rpx;
}
.product_info .product_list .product_list_title {
  font-size: 26rpx;
  color: #181818;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 50rpx;
  line-height: 50rpx;
  width: 325rpx;
  padding-left: 10rpx;
}
.product_info .product_list .activities {
  padding-left: 10rpx;
}
.product_info .product_list .activities .activity {
  float: left;
  padding: 2rpx 6rpx;
  border: 1rpx solid #ff6a00;
  font-size: 20rpx;
  color: #ff6a00;
  margin-right: 10rpx;
  border-radius: 3rpx;
}
.product_info .product_list .product_data {
  margin-top: 5rpx;
  padding-left: 10rpx;
  width: 325rpx;
}
.product_info .product_list .product_data .price {
  font-size: 22rpx;
  color: #ff6a00;
  font-weight: bold;
  float: left;
}
.product_info .product_list .product_data .price > view {
  display: inline;
  font-size: 30rpx;
}
.product_info .product_list .product_data .amount {
  float: right;
  color: #999;
  font-size: 22rpx;
  padding-top: 7rpx
}
</style>